<template>
  <el-dialog :title="title" :visible="directorysDialog" :show-close="false" width="25%">
    <!-- 操作项目 -->
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-form-item v-if="!$route.query.id" label="所属学科" prop="subjectID">
        <el-select v-model="formData.subjectID" placeholder="请选择" :style="{ width: '100%' }">
          <el-option v-for="(item, index) in subjectSimpleList" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="目录名称" prop="directoryName">
        <el-input v-model="formData.directoryName" placeholder="请输入目录名称" :style="{ width: '100%' }" />
      </el-form-item>
    </el-form>
    <!-- 底部插槽 -->
    <template slot="footer">
      <el-row type="flex" justify="end" align="center">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { add, update } from '@/api/hmmm/directorys.js'
import { cleanNullValue } from '@/filters/index.js'
export default {
  props: {
    // 弹层操作类型
    operation: {
      type: String,
      required: true
    },
    // 弹层开关
    directorysDialog: {
      type: Boolean,
      required: true
    },
    // 简单学科列表
    subjectSimpleList: {
      type: Array,
      required: true
    },
    // 目录数组
    directorysList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      formData: {
        id: null,
        subjectID: '',
        directoryName: ''
      },
      rules: {
        subjectID: [
          {
            required: true,
            message: '请选择',
            trigger: 'blur'
          }
        ],
        directoryName: [
          {
            required: true,
            message: '请输入目录名称',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    title() {
      if (this.operation === 'edit') {
        return '编辑目录'
      }
      return '新增目录'
    }
  },
  created() {
    if (this.$route.query.id) {
      this.formData.subjectID = parseInt(this.$route.query.id)
    }
  },
  methods: {
    // 取消
    close() {
      this.$emit('update:directorysDialog', false)
      this.$refs['elForm'].resetFields()
      this.formData = this.$options.data().formData
    },
    // 确定
    async submitForm() {
      try {
        if (this.title === '新增目录') {
          await this.$refs.elForm.validate()
          await add(cleanNullValue(this.formData))
          this.$message.success('新增成功')
        } else {
          await update(cleanNullValue(this.formData))
          this.$message.success('更新成功')
        }
        this.$parent.$parent.getDirectorysList()
      } catch (error) {
        if (error === false) return
        this.$message.error(error)
      } finally {
        this.close()
      }
    },
    // 回显数据
    echoData(id) {
      // 目录id
      if (this.$route.query.id) {
        // 将路径参数id作为学科id
        this.formData.subjectID = this.$route.query.id
      } else {
        // 学科id和目录id，目录名称
        this.formData.id = id
        const result = this.directorysList.find(ele => {
          return ele.id === id
        })
        this.formData.directoryName = result.directoryName
        this.formData.subjectID = result.subjectID
      }
    }
  }
}
</script>

<style scoped lang='less'></style>
